<template>
	<view class="home-layout">
		<view class="top-box" :class="[channelStore.homeBigBgClassName]" :style="{paddingTop:safeTop + 'px'}">
			<!-- 导航 -->
			<view class="nav-box">
				<text class="nav-title">您好，汇拓宝！</text>
				<view class="nav-right" @tap="switchChannel">
					<image class="nav-right-icon" :src="channelStore.channelTypeWhiteIcon" mode="aspectFit"></image>
					<image class="nav-right-change" src="/static/home/home_change_icon@2x.png" mode="aspectFit"></image>
				</view>
			</view>
			<!-- 统计 -->
			<view class="money-info" :class="[channelStore.homeSmallBgClassName]">
				<text class="money-info-title">累计总收益(元)</text>
				<text class="money-info-money">{{statisticsData.totalIncome}}</text>
				<view class="money-info-bottom">
					<view class="money-info-bottom-litem">
						<text class="money-info-bottom-litem-title">激活收益(元)</text>
						<text class="money-info-bottom-litem-money">{{statisticsData.activeReward}}</text>
					</view>
					<view class="money-info-bottom-space"></view>
					<view class="money-info-bottom-litem">
						<text class="money-info-bottom-litem-title">激活收益(元)</text>
						<text class="money-info-bottom-litem-money">{{statisticsData.otherActiveReward}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 菜单 -->
		<view class="home-menu">
			<xh-home-menu></xh-home-menu>
		</view>
		<!-- 广告 -->
		<view class="banner-box">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :circular="true" :interval="3000" :duration="500">
				<swiper-item class="swiper-item" v-for="(item,index) in bannerList" :key="index" @tap="didSelectBannerItem(item)">
					<image class="swiper-image" :src="item.imgPath" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<xh-channel-pop ref="sideMenuRef" @success="getHomeData"></xh-channel-pop>
		<xh-auth-pop ref="authRef"></xh-auth-pop>
	</view>
</template>

<script setup>
	import { onLoad,onShow } from '@dcloudio/uni-app'
	import { reactive, ref,nextTick } from 'vue'
	import XhHomeMenu from './widget/xh-home-menu.vue'
	import XhChannelPop from './widget/xh-channel-pop.vue'
	import { useChannelStore,useUserStore } from '@/common/stores'
	import { getBannerList,getStatisticsData } from '@/common/api/api.js'
	const safeTop = ref(0)
	const channelStore = useChannelStore()
	const userStore = useUserStore()
	const sideMenuRef = ref(null)
	const authRef = ref(null)
	const bannerList = ref([])
	const statisticsData = ref({
		// 激活收益
		activeReward:'0.00',
		// 其他收益
		otherActiveReward:'0.00',
		// 累计收益
		totalIncome:'0.00',
	})
	//切换机构
	const switchChannel = () => {
		sideMenuRef.value.open()
	}
	//获取首页数据
	const getHomeData = ()=>{
		getBannerData()
		if(userStore.isAuth){
			getHomeStatisticsData()
		}
	}
	// 获取banner数据
	const getBannerData = async ()=>{
		const res = await getBannerList({location:'02'})
		bannerList.value = res.result
	}
	// 获取统计数据
	const getHomeStatisticsData = async ()=>{
		const res = await getStatisticsData()
		statisticsData.value = res.result
	}
	//点击banner
	const didSelectBannerItem = (item)=>{
		if(!userStore.isAuth){
			authRef.value.open()
			return
		}
		if(item.link && item.link.startsWith('http')){
			uni.navigateTo({
				url:`/pages/webview/webview?url=${item.link}`
			})
		}
	}
	onShow(async ()=>{
		await userStore.updateUserInfo()
		getHomeData()
	})
	onLoad( () => {
		safeTop.value = uni.getSystemInfoSync().safeAreaInsets.top
		channelStore.updateTabBarStyle()
		nextTick(()=>{
			if(userStore.user.authStatus != '00') {
				authRef.value.open()
			}
		})
	})
</script>

<style lang="scss" scoped>
	.home-layout {
		background-color: white;
		min-height: 100vh;

		.top-bg-KDB {
			background-image: url('/static/home/home_top_bg_KDB@2x.png');
		}

		.top-bg-QB {
			background-image: url('/static/home/home_top_bg_QB@2x.png');
		}

		.top-bg-HHB {
			background-image: url('/static/home/home_top_bg_HHB@2x.png');
		}

		.top-box {
			background-repeat: no-repeat;
			background-size: 100% 100%;

			.nav-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;
				color: white;
				height: 100rpx;

				.nav-title {
					color: white;
					font-size: 30rpx;
					font-weight: bold;
				}

				.nav-right {
					display: flex;
					align-items: center;

					.nav-right-icon {
						width: 128rpx;
						height: 56rpx;
					}

					.nav-right-change {
						width: 48rpx;
						height: 48rpx;
					}
				}
			}

			.money-info {
				margin: 0 30rpx;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 30rpx;
				color: white;

				.money-info-title {
					font-size: 30rpx;
				}

				.money-info-money {
					font-size: 80rpx;
					margin-top: 10rpx;
				}

				.money-info-bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					margin-top: 30rpx;
					height: 80rpx;
					margin-bottom: 30rpx;

					.money-info-bottom-litem {
						display: flex;
						flex-direction: column;
						align-items: center;
						flex: 1;
						color: white;

						.money-info-bottom-litem-title {
							font-size: 26rpx;
						}

						.money-info-bottom-litem-money {
							font-size: 40rpx;
							font-weight: 600;
							margin-top: 10rpx;
						}
					}

					.money-info-bottom-space {
						width: 1px;
						background-color: white;
						height: 100%;
					}
				}
			}

			.money-info-bg-KDB {
				background-image: url('/static/home/home_money_bg_KDB@2x.png');
			}

			.money-info-bg-QB {
				background-image: url('/static/home/home_money_bg_QB@2x.png');
			}

			.money-info-bg-HHB {
				background-image: url('/static/home/home_money_bg_HHB@2x.png');
			}
		}

		.home-menu {
			background-color: #ffffff;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			margin-top: -30rpx;

		}

		.banner-box {
			padding: 30rpx;

			.swiper {
				width: 100%;
				height: 200rpx;
				border-radius: 20rpx;
				overflow: hidden;

				.swiper-image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>